<template>
	<header class='h36 fxm' :class='[setClass(titleMode), _bgcolor ]' :style='_style'>
		<h2 v-if='title' class='fxm nowrap b nosel' :class="(titleMode===2||titleMode===3) ? 'g6':'g3'">
			<i v-if='titleMode === 2 || titleMode === 3' class='r10px mr5 rel' style='width:6px;height:6px;background-color:#999;'></i>
			<i v-else class='bcm r10px mr5 rel' style='width:4px;height:12px'></i>
			{{title}}
		</h2>
		<span v-if='subTitle || grayTitle' class='f13 ml5' :class="grayTitle ? 'g9' : 'c0'">({{subTitle || grayTitle}})</span>
		<slot></slot>
		<Controls class='ex' :config='config' :refresh='refresh' :back='back' :dir='title ? 1 : 0' :table='table' :loading='loading'/>
	</header>
</template>

<script setup>
	/* --------------------------- Function --------------------------- */
	import isColor from '@utils/isColor'
	/* --------------------------- Component --------------------------- */
	const Controls 	= $.lazy(()=>import('#cpt/temp/Controls.vue'))
	/* --------------------------- props --------------------------- */
	const { bgcolor, style } = defineProps({
		config 		: Object,
		title 		: { type:String, default:({ config }) => config?.title },
		subTitle 	: { type:String, default:({ config }) => config?.subTitle },
		grayTitle 	: { type:String, default:({ config }) => config?.grayTitle },
		title 		: { type:String, default:({ config }) => config?.title },
		table 		: { type:Object, default:({ config }) => config?.table },
		loading 	: { type:Boolean, default:({ config }) => config?.loading },
		titleMode	: { type:Number, default:({ config }) => config?.titleMode },
		refresh 	: { type:Boolean, default:({ config }) => config?.refresh },
		back 	: { type:Boolean, default:({ config }) => config?.back },
		bgcolor 	: { type:String, default:'bcf'}
	})
	
	let _bgcolor = bgcolor
	let _style = style
	if( isColor(bgcolor) ){
		_bgcolor = ''
		_style = { backgroundColor: bgcolor, ...style}
	}
	
	const setClass = mode => {
		if(mode === 1){
			return 'r3px plr10 f14'
		}else if(mode === 2){
			return 'bbor1 mlr10 f13'
		}else if(mode === 3){
			return 'bbor1 plr10 f13'
		}else{
			return 'bbor1 plr10 f14'
		}
	}
</script>
